<template>
  <page-wrap back :show-top="showTop" :bg-color="uNavColor" hide-tab :hideSafeArea="true">
    <view class="topContainer">
      <!-- <button           
          :data-title="11111"
          :data-articleid="2"
          :data-thumb="emptyImg"
          data-sharetype="1" 
          plain 
          size="mini" 
          class="btn-share" 
          open-type="share">
          <text class="icon icon-share"></text>
        </button> -->
      <view class="inputView">
        <u-search placeholder="看看你喜欢的专业能干什么" v-model="keyword" show-action="false" shape="round" height="72"
          search-icon-color="#C9D7ED" bg-color="white" placeholder-color="#B9CEED" @change="searchChange"
          @blur="searchBlur"></u-search>
        <view class="btn" @click.stop="handleSearch"></view>
        <view class="listView" v-if="showList">
          <scroll-view :scroll-y="true" class="searchResult">
            <view class="resultList" v-if="list.length">
              <view class="resultItem" v-for="(item, index) in list" :key="index" @click="clickCell(item, 'search')">
                <view class="resultTitle">{{ item.tagName }}</view>
                <view class="resultDesc">{{ item.topName ? item.topName + " - " : ""
                }}{{ item.parentName ? item.parentName : "" }}</view>
              </view>
            </view>
            <text class="empty" v-if="loaded && list.length <= 0">没有对应专业，请重新输入</text>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="botContainer"></view>
  </page-wrap>
</template>

<script>
import ShareMixin from "@/mixins/share";
import { shareHelpUnlock } from "@/api/modules/career";
import { getpositionTagAndParentList } from "@/api/modules/major";

export default {
  mixins: [ShareMixin],
  data() {
    return {
      keyword: "",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      isClickRow: false,
      showList: false,
      selectedItem: {},
      list: [],

      pageParams: {
        pageNo: 1,
        pageSize: 30,
      },
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      searchIcon: this.$imgBaseSelf + "common/search.png",
      finished: false,
      loading: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },
  created() { },
  onLoad(opt) {
    this.sharePath = "pagesSub/career/positionDictionary/advertise";
    this.shareHelpUnlock(opt);
  },

  methods: {
    handleSearch() {
      // this.showList = false;
      if (!this.keyword) {
        uni.showToast({
          title: "请填写专业",
          icon: "none",
        });
        return;
      }
      if (Object.keys(this.selectedItem).length === 0) {
        if (this.list.length == 0) {
          uni.showToast({
            title: "没有对应专业，请重新输入",
            icon: "none",
          });
          return;
        } else {
          this.selectedItem = this.list[0];
        }
      }

      // 数据统计
      let pageName = "营销页(请问你想？)";
      wx.reportEvent("advertise", {
        uid: this.personId,
        page: pageName,
      });

      let params = {
        positionOrMajor: 1,
        levelNum: 3,
        tagName: this.selectedItem.tagName,
        positionTagId: this.selectedItem.positionTagId,
        advertise: true,
        pageName,
      };

      getApp().globalData.allCategoryParams = params;
      // uni.switchTab({
      //   url: "/pages/career/positionDictionary/allCategory",
      // });
      uni.navigateTo({
        url: `/pagesSub/careerGrow/allCategory/allCategory`,
      });
    },

    searchChange() {
      if (this.keyword.length > 0 && !this.isClickRow) {
        this.selectedItem = {};
        this.showList = true;
        this.getData(false);
      } else {
        this.showList = false;
      }
      this.isClickRow = false;
    },

    searchBlur() {
      // this.showList = false;
    },

    loadMore() {
      this.getData(true);
    },

    getData(isMore) {
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        // 刷新数据
        this.pageParams.pageNo = 1;
      }
      this.moreLoading = "loading";

      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        tagLevel: 3,
        tagType: 10,
        cateType: "10,30",
        matchName: this.keyword,
      };
      getpositionTagAndParentList(params)
        .then((res) => {
          console.log("🚀 ~ file: advertise.vue:174 ~ .then ~ res:", res);
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            console.log(
              "🚀 ~ file: advertise.vue:225 ~ .then ~ this.list:",
              this.list
            );
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },

    shareHelpUnlock(opt) {
      if (opt.positionId && opt.sharePersonId) {
        const params = {
          positionId: opt.positionId, //  职位id
          sharePersonId: opt.sharePersonId, // 分享用户id
        };
        console.log(params);
        shareHelpUnlock(params).then((res) => {
          console.log(
            "🚀 ~ file: advertise.vue:135 ~ shareHelpUnlock ~ res:",
            res
          );
          if (res.code == 200) {
          }
        });
      }
    },

    clickCell(item) {
      console.log("🚀 ~ file: advertise.vue:196 ~ clickCell ~ item:", item);
      this.selectedItem = item;
      this.keyword = item.tagName;
      this.isClickRow = true;
      this.showList = false;
    },

    share() {
      wx.showShareMenu({
        withShareTicket: true,
        success: function () {
          console.log("分享菜单已显示");
        },
        fail: function () {
          console.log("分享菜单显示失败");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes searchMove {
  0% {
    transform: scale(1, 1);
  }

  21% {
    transform: scale(1.1, 1.1);
  }

  42% {
    transform: scale(0.95, 0.95);
  }

  46% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.topContainer {
  background-image: url($img-base + "career/advertise/bground_top2.png");
  background-size: 100% auto;
  height: 761rpx; //calc(761rpx / 750rpx * 100vw);
  display: flex;
  justify-content: center;
  position: relative;

  .inputView {
    height: 72rpx;
    width: 86%;
    position: absolute;
    bottom: 0rpx;

    .btn {
      background-image: url($img-base + "career/advertise/advertise_btn.png");
      background-size: 100% 100%;
      width: 165rpx;
      height: 74rpx;
      position: absolute;
      top: -2rpx;
      right: 0rpx;

      animation-name: searchMove;
      animation-duration: 1.85s;
      animation-iteration-count: infinite;
    }

    .listView {
      background-color: white;
      height: 500rpx;
      border-radius: 10rpx;
      box-shadow: 0 0 10rpx $shadow-color;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      margin-top: 10rpx;
      padding: 20rpx;
    }
  }
}

.botContainer {
  background-image: url($img-base + "career/advertise/bg_bot3.png");
  background-size: 100% auto;
  height: 1005rpx;
}

.scrollView {
  box-sizing: border-box;
  // height: calc(100vh - 64rpx);
  height: 100%;
}

.allContaienr {
  background: white;
  margin: 0rpx 0rpx 20rpx;

  .itemName {
    font-size: 16px;
    color: #222222;
  }
}

.empty {
  position: absolute;
  top: 100rpx;
  text-align: center;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888888;
  width: 100%;
  text-align: center;
}

.btn-share {
  padding: 0;
  border: none;
  background-color: transparent;

  position: absolute;
  top: 300rpx;
  left: 200rpx;
}

.icon-share {
  width: 72rpx;
  height: 72rpx;
  background-image: url($img-base + "career/zhuanfa_red.png");
}

.searchResult {
  width: 100%;
  background-color: #fff;
  bottom: -120rpx;
  height: 100%;
  overflow: scroll;

  .resultList {
    overflow: scroll;
    padding-bottom: 48rpx;

    .resultItem {
      padding: 20rpx 16rpx;
      border-bottom: 1px solid #f5f5f5;

      &:last-of-type {
        border-bottom: 0;
      }

      .resultTitle {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        margin-bottom: 16rpx;

        .light {
          color: #f75a3e;
        }
      }

      .resultDesc {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
      }
    }
  }
}
</style>
